<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
</head>
<body>
<div id="view">
    <my-header></my-header>
    <my-aside></my-aside>
    <my-main></my-main>
    <my-div></my-div>
    <my-button></my-button>
</div>
<script src="../js/vue.js"></script>
<script>
    <!--对象 component 方法的第二个参数-->
    const myDiv = {
        data() {
            return {
                message: "局部注册"
            }
        },
        methods: {},
        template: `
          <h3>{{ message }}</h3>
        `
    }

    const myButton = {
        template: `
          <button>一个按钮</button>
        `
    }
    const app = Vue.createApp({
        data() {
            return {
                count: 1
            }
        },
        // 在当前vue实例中引用 myDiv 组件
        components: {
            'my-div': myDiv,
            'my-button' : myButton
        },
        methods: {}
    })


    app.component('my-header', {
        template: `
          <div style="height: 80px;width: 100%"></div>
        `
    })

    app.component('my-aside', {
        template: `
            <div style="float: left;width: 20%;height: 300px"></div>
        `
    })

    app.component('my-main', {
        template: `
            <div style="float: right;width: 80%;height: 300px"></div>
        `
    })
    app.mount("#view")
</script>
</body>
</html>